<script setup lang="ts">
import {computed} from "vue";
import {getBaseURL, getToken, windowURL} from "@/utils";

const props = withDefaults(
    defineProps<{
      accept: string;
      value: string
    }>(),
    {
      accept: 'image/*',
      value: ''
    }
)

const emits = defineEmits<{
  (e: 'update:value', str: string): void
}>()

const action = computed(() => {
  return getBaseURL() + 'file/uploadImg'
})

const headers = computed(() => {
  return {
    token: getToken()
  }
})

const handleSuccess = (e: any) => {
  emits('update:value', e.response.data as string)
}

const imgSrc = computed(() => {
  // const baseURL = window.CONFIG.baseURL.slice(0, -1);
  const baseURL = windowURL();
  return baseURL + props.value;
}) 
</script>

<template>
  <a-upload
      :action="action"
      :show-file-list="false"
      :accept="accept"
      :headers="headers"
      image-loading="lazy"
      list-type="picture-card"
      @success="handleSuccess"
      image-preview
  >
    <template #upload-button>
      <div v-if="value" class="arco-upload-list-picture custom-upload-avatar">
        <img :src="imgSrc" />
        <div class="arco-upload-list-picture-mask">
          <IconEdit />
        </div>
      </div>
      <div class="arco-upload-picture-card" v-else>
        <div class="arco-upload-picture-card-text">
          <IconPlus />
          <div style="margin-top: 10px; font-weight: 600">Upload</div>
        </div>
      </div>
    </template>
  </a-upload>
</template>

<style scoped lang="scss">

</style>